<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" href="css/reset.css"/>
		<link rel="stylesheet" href="css/index.css"/>
		<script src="js/index.js"></script>
	</head>
	<body>
		<div id="container">
			<header>
				<div class="header-nav">
					<div class="nav-content">
						<div class="nav-left">
							<a href = "/">小米官网</a>
							<a href = "/">小米商城</a>
							<a href = "/">小米澎湃OS</a>
							<a href = "/">小米汽车</a>
							<a href = "/">云服务</a>
							<a href = "/">IoT</a>
							<a href = "/">有品</a>
							<a href = "/">小爱开放平台</a>
							<a href = "/">资质证照</a>
							<a href = "/">协议规则</a>
							<a href = "/">下载app</a>
							<a href = "/">Select Location</a>
						</div>
						<div class="nav-right">
							<ul>
								<li><a href="/">登录</a></li>
								<li><a href="/">注册</a></li>
								<li><a href="/">消息通知</a></li>
							</ul>
							<div class="cart">
								<img src='img/iconfont-cart.png'/>
								购物车  ( 0 )
							</div>
						</div>
					</div>
				</div>
				<div class="header-product">
					<div class="pro-content">
						<div class="pro-left">
							<img src='img/logo-mi2.png'/>
						</div>
						<div class="pro-center">
							<div class="pro-center-left">
								
							</div>
							<div class="pro-center-right">
								<a href="/">Xiaomi手机</a>
								<a href="/">REDMI手机</a>
								<a href="/">电视</a>
								<a href="/">笔记本</a>
								<a href="/">平板</a>
								<a href="/">家电</a>
								<a href="/">路由器</a>
								<a href="/">服务中心</a>
								<a href="/">社区</a>
							</div>
						</div>
							<div class="search-box">
								<div class="search-box-left">
									<input type="text" placeholder="充电宝"/>
								</div>
								<div class="search-box-right">
									<!-- <img src="img/mi-search.png"/> -->
								</div>
							</div>
					</div>
				</div>
			</header>
			<div class="banner" id="banner">
				<div class="banner-left">
					<div>
						手机
						<div class="sj">
							
						</div>
					</div>
					<div>电视</div>
					<div>家电</div>
					<div>笔记本 平板 显示器</div>
					<div>出行 穿戴</div>
					<div>耳机 音箱</div>
					<div>健康 儿童</div>
					<div>生活 箱包</div>
					<div>智能 路由器</div>
					<div>电源 配件</div>
				</div>
			</div>
			<div class="advert">
					<div class="item1">
						<ul>
							<li>
								<img src="img/icon1.png"/>
								保障服务
							</li>
							<li>
								<img src="img/icon2.png"/>
								米粉卡
							</li>
						    <li>
								<img src="img/icon3.png"/>
								企业团购
							</li>
							<li>
								<img src="img/icon4.png"/>
								以旧换新
							</li>
							<li>
								<img src="img/icon5.png"/>
								F码通道
							</li>
							<li>
								<img src="img/icon6.png"/>
								话费充值
							</li>
						</ul>
					</div>
					<img src="img/item1.png"/>
					<img src="img/item2.png"/>
					<img src="img/item3.png"/>
			</div>
			<div class="page-main">
				<div class="page-container">
					<img src="img/line5.png" />
					<div class="box-hd">
						<h2>手机</h2>
						<div class="more">
							<span>查看更多</span>
							<img src="img/right.png"/>
						</div>
					</div>
					<div class="phone-list">
						<div class="column1">
							<img src="img/line6-1.png"/>
						</div>
						<div class="column2">
							<div class="column2-top">
								<img src="img/line6-2.png"/>
								<h3>Xiaomi MlX Flip 2</h3>
								<p class="desc">4.01英寸多功能超大外屏</p>
								<p class="price">5999元起</p>
							</div>
							<div class="column2-bottom">
								<img src="img/line6-3.png"/>
								<h3>Xiaomi MlX Flip 2</h3>
								<p class="desc">4.01英寸多功能超大外屏</p>
								<p class="price">5999元起</p>
							</div>
						</div>
						<div class="column2">
							<div class="column2-top">
								<img src="img/line6-4.png"/>
								<h3>Xiaomi MlX Flip 2</h3>
								<p class="desc">4.01英寸多功能超大外屏</p>
								<p class="price">5999元起</p>
							</div>
							<div class="column2-bottom">
								<img src="img/line6-5.png"/>
								<h3>Xiaomi MlX Flip 2</h3>
								<p class="desc">4.01英寸多功能超大外屏</p>
								<p class="price">5999元起</p>
							</div>
						</div>
						<div class="column2">
							<div class="column2-top">
								<img src="img/line6-6.png"/>
								<h3>Xiaomi MlX Flip 2</h3>
								<p class="desc">4.01英寸多功能超大外屏</p>
								<p class="price">5999元起</p>
							</div>
							<div class="column2-bottom">
								<img src="img/line6-7.png"/>
								<h3>Xiaomi MlX Flip 2</h3>
								<p class="desc">4.01英寸多功能超大外屏</p>
								<p class="price">5999元起</p>
							</div>
						</div>
						<div class="column2">
							<div class="column2-top">
								<img src="img/line6-8.png"/>
								<h3>Xiaomi MlX Flip 2</h3>
								<p class="desc">4.01英寸多功能超大外屏</p>
								<p class="price">5999元起</p>
							</div>
							<div class="column2-bottom">
								<img src="img/line6-9.png"/>
								<h3>Xiaomi MlX Flip 2</h3>
								<p class="desc">4.01英寸多功能超大外屏</p>
								<p class="price">5999元起</p>
							</div>
						</div>
					</div>
					<div class="box-hd">
						<h2>手机</h2>
						<div class="more">
							<span>查看更多</span>
							<img src="img/right.png"/>
						</div>
					</div>
					<div class="phone-list">
						<div class="column1">
							<img src="img/line6-1.png"/>
						</div>
						<div class="column2">
							<div class="column2-top">
								<img src="img/line6-2.png"/>
								<h3>Xiaomi MlX Flip 2</h3>
								<p class="desc">4.01英寸多功能超大外屏</p>
								<p class="price">5999元起</p>
							</div>
							<div class="column2-bottom">
								<img src="img/line6-3.png"/>
								<h3>Xiaomi MlX Flip 2</h3>
								<p class="desc">4.01英寸多功能超大外屏</p>
								<p class="price">5999元起</p>
							</div>
						</div>
						<div class="column2">
							<div class="column2-top">
								<img src="img/line6-4.png"/>
								<h3>Xiaomi MlX Flip 2</h3>
								<p class="desc">4.01英寸多功能超大外屏</p>
								<p class="price">5999元起</p>
							</div>
							<div class="column2-bottom">
								<img src="img/line6-5.png"/>
								<h3>Xiaomi MlX Flip 2</h3>
								<p class="desc">4.01英寸多功能超大外屏</p>
								<p class="price">5999元起</p>
							</div>
						</div>
						<div class="column2">
							<div class="column2-top">
								<img src="img/line6-6.png"/>
								<h3>Xiaomi MlX Flip 2</h3>
								<p class="desc">4.01英寸多功能超大外屏</p>
								<p class="price">5999元起</p>
							</div>
							<div class="column2-bottom">
								<img src="img/line6-7.png"/>
								<h3>Xiaomi MlX Flip 2</h3>
								<p class="desc">4.01英寸多功能超大外屏</p>
								<p class="price">5999元起</p>
							</div>
						</div>
						<div class="column2">
							<div class="column2-top">
								<img src="img/line6-8.png"/>
								<h3>Xiaomi MlX Flip 2</h3>
								<p class="desc">4.01英寸多功能超大外屏</p>
								<p class="price">5999元起</p>
							</div>
							<div class="column2-bottom">
								<img src="img/line6-9.png"/>
								<h3>Xiaomi MlX Flip 2</h3>
								<p class="desc">4.01英寸多功能超大外屏</p>
								<p class="price">5999元起</p>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>
